<template>
  Home
  <br>

  <!-- 下拉框 -->
  <el-select v-model="presuppose" placeholder="首页预设" style="width: 240px" @change="selectPresuppose">
    <el-option v-for="item in presupposeArray" :key="item.id" :label="item.label" :value="item.id" />
  </el-select>

  <!-- 占位 -->
  <div style="width: 100%; height: 1.5rem;"></div>

  <!-- 表单 -->
  <el-form :model="mainDisplay" label-width="120px" size="large">
    <el-form-item label="预设名称">
      <el-input v-model="mainDisplay.label" style="width: 800px;" />
    </el-form-item>
    <el-form-item label="大标题">
      <el-input v-model="mainDisplay.title" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" resize="none"
        style="width: 800px;" />
    </el-form-item>
    <el-form-item label="描述">
      <el-input v-model="mainDisplay.discribe" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" resize="none"
        style="width: 800px;" />
    </el-form-item>
    <el-form-item label="链接">
      <el-input v-model="mainDisplay.link" style="width: 800px;" />
    </el-form-item>
    <el-form-item label="official">
      <el-input v-model="mainDisplay.official" style="width: 800px;" />
    </el-form-item>
    <el-form-item label="官网">
      <el-input v-model="mainDisplay.officialWeb" style="width: 800px;" />
    </el-form-item>
    <el-form-item label="官方logo">
      <el-input v-model="mainDisplay.officialPic" style="width: 800px;" />
    </el-form-item>
    <el-form-item label="轮播图">
      <el-button type="primary" plain @click="addpic()" style="width: 200px;">添加</el-button>
    </el-form-item>
    <el-form-item v-for="(pic, index) in mainDisplay.pics" :label="'图片' + (index + 1)" :key="index">
      <el-input v-model="mainDisplay.pics[index]" autocomplete="off" style="width: 600px; margin-right: 10px;" />
      <el-button @click.prevent="removepic(pic)">删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="update" style="width: 200px;">保存</el-button>
      <el-button type="success" @click="submit" style="width: 200px;">另存为</el-button>
      <el-button type="warning" @click="setMainView" style="width: 200px;">设为首页</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ElNotification } from 'element-plus'
import { ref } from 'vue'
import { getHomeDisplay, updateHomeDisplay, postHomeDisplay, updateMainDisplay } from '../../api/api'

// 获取首页内容
const mainDisplay = ref({
  id: '',
  label: '',
  title: '',
  discribe: '',
  link: '',
  official: '',
  officialWeb: '',
  officialPic: '',
  pics: []
})

// 从服务器读取
const getMainDisplayData = () => {
  getHomeDisplay().then(response => {
    presupposeArray.value = response.data
    mainDisplay.value = presupposeArray.value[0]
  }).catch(error => console.log(error))
}
getMainDisplayData()


// 移除pic
const removepic = (item) => {
  const index = mainDisplay.value.pics.indexOf(item)
  if (index !== -1) {
    mainDisplay.value.pics.splice(index, 1)
  }
}

// add pic
const addpic = () => {
  mainDisplay.value.pics.push('')
}

// 提交更新
const update = () => {
  updateHomeDisplay(mainDisplay.value, presuppose.value).then(response => {
    ElNotification({
      title: '更新成功',
      message: '首页已更新',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '更新失败',
      message: error.message,
      type: 'error'
    })
  })
}

// 提交另存
const submit = () => {
  let data = mainDisplay.value
  data.id = String(presupposeArray.value.length + 1)
  postHomeDisplay(data).then(response => {
    ElNotification({
      title: '另存成功',
      message: '已新建预设',
      type: 'success'
    })
    // 获取更新数据
    getMainDisplayData()
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '另存失败',
      message: error.message,
      type: 'error'
    })
  })
}

// 设为首页
const setMainView = () => {
  let { id, ...data } = mainDisplay.value
  updateMainDisplay(data).then(response => {
    ElNotification({
      title: '设置成功',
      message: '首页已更新',
      type: 'success'
    })
  }).catch(error => {
    console.log(error)
    ElNotification({
      title: '设置失败',
      message: error.message,
      type: 'error'
    })
  })
}

// ================ 获取多组预设 ================ //
// 当前预设id
const presuppose = ref('1')
// 预设组
const presupposeArray = ref([
  {
    id: '1',
    label: '预设1',
  }
])

// 选中当前预设
const selectPresuppose = (val) => {
  mainDisplay.value = presupposeArray.value[val - 1]
}
</script>

<style scoped></style>